<template>
	<xbd-pages-content :title="title">
		<template #content>
			<view class="content">
				<view class="name-list">
					<management-card :title="title" :num="total"></management-card>
					<view class="search">
						<uni-easyinput
							class="ipt"
							v-model="keyword"
							:placeholder="!!~title.indexOf('人员') ? '搜索人员姓名查询' : '搜索车牌号查询'"
							placeholderStyle="color: #999;"
						></uni-easyinput>
						<image class="img" src="@/static/images/common/search.svg" mode="" @click="search"></image>
					</view>
					<uni-list v-if="nameList.length" :border="false">
						<uni-list-chat
							v-for="item in nameList"
							:key="item._id"
							:avatarCircle="!!~title.indexOf('人员')"
							:title="item.name || '-'"
							:avatar="item.avatar | imgFormat(!!~title.indexOf('车辆'))"
							:note="item.plateCode || '-'"
							:time="(item.unit)"
							:clickable='true'
							@click="clickCard(item._id)"
						></uni-list-chat>
						<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore" @more="goLoadMore"></xbd-loading-more>
					</uni-list>
				</view>
				<xbd-null-list v-if="!nameList.length && !loading"></xbd-null-list>
				<uni-load-more
					v-if="loading"
					status="loading"
					:iconSize="12"
					:contentText="{
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '到底了~'
				}"></uni-load-more>
			</view>
			
		</template>
	</xbd-pages-content>
</template>

<script>
	import ManagementCard from '@/components/management/ManagementCard.vue';
	import { nameList } from '@/mock/management/management.js';
	import { Person, Vehicle } from '@/api/index.js';
	export default {
		data() {
			return {
				title: '人员白名单',
				nameList: [],
				statusNum: 2,
				isLoadMore: false,
				loading: false,
				total: 0,
				keyword: '',
				queryInfo: {
					keyword: '',
					page: 0,
					perpage: 10
				}
			};
		},
		components: {
			ManagementCard
		},
		methods: {
			clickCard(id){
				if(id === '-'){
					uni.showToast({
						title: '暂无人员详情信息',
						icon: 'none',
					})
				}else{
					uni.navigateTo({
						url:`./peopledetail?id=${id}&title=${this.title}`
					})
				}
			},
			// 加载更多
			async loadmore() {
				this.queryInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				if (~this.title.indexOf('人员')) {
					if (~this.title.indexOf('白')) {
						await this.loadmorePersonWhiteList();
					} else {
						await this.loadmorePersonBlackList();
					}
				} else {
					if (~this.title.indexOf('白')) {
						await this.loadmoreVehicleWhiteList();
					} else {
						await this.loadmoreVehicleBlackList();
					}
				}
			},
			search() {
				this.queryInfo.page = 0;
				this.isLoadMore = false;
				this.queryInfo.keyword = this.keyword;
				if (~this.title.indexOf('人员')) {
					if (~this.title.indexOf('白')) {
						this.getPersonWhiteList(false);
					} else {
						this.getPersonBlackList(false);
					}
				} else {
					if (~this.title.indexOf('白')) {
						this.getVehicleWhiteList(false);
					} else {
						this.getVehicleBlackList(false);
					}
				}
			},
			// 获取人员白名单信息
			async getPersonWhiteList(init) {
				try {
					this.loading = true;
					this.nameList = [];
					// this.$showLoading('加载中');
					const res = await Person.getPersonWhiteList(this.queryInfo);
					if (res.success) {
						this.loading = false;
						// uni.hideLoading();
						this.nameList = res.data.data;
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
						init && (this.total = res.data.total);
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
				}
			},
			// 加载更多人员白名单
			async loadmorePersonWhiteList() {
				try {
					// this.$showLoading('加载中');
					const res = await Person.getPersonWhiteList(this.queryInfo);
					// uni.hideLoading();
					if (res.data.data.length) {
						this.nameList = this.nameList.concat(res.data.data);
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch(e) {
					this.queryInfo.page--;
					this.statusNum = 0;
				}
			},
			// 获取人员黑名单信息
			async getPersonBlackList(init) {
				try {
					// this.$showLoading('加载中');
					this.loading = true;
					this.nameList = [];
					const res = await Person.getPersonBlackList(this.queryInfo);
					if (res.success) {
						// uni.hideLoading();
						this.loading = false;
						this.nameList = res.data.data;
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
						init && (this.total = res.data.total);
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
				}
			},
			// 加载更多人员黑名单
			async loadmorePersonBlackList() {
				try {
					// this.$showLoading('加载中');
					const res = await Person.getPersonBlackList(this.queryInfo);
					// uni.hideLoading();
					if (res.data.data.length) {
						this.nameList = this.nameList.concat(res.data.data);
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch(e) {
					this.queryInfo.page--;
					this.statusNum = 0;
					// uni.hideLoading();
				}
			},
			// 获取车辆白名单信息
			async getVehicleWhiteList(init) {
				try {
					this.loading = true;
					this.nameList = [];
					// this.$showLoading('加载中');
					const res = await Vehicle.getVehicleWhiteList(this.queryInfo);
					if (res.success) {
						// uni.hideLoading();
						this.loading = false;
						this.nameList = res.data.data;
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
						init && (this.total = res.data.total);
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
				}
			},
			// 加载更多车辆白名单
			async loadmoreVehicleWhiteList() {
				try {
					// this.$showLoading('加载中');
					const res = await Vehicle.getVehicleWhiteList(this.queryInfo);
					// uni.hideLoading();
					if (res.data.data.length) {
						this.nameList = this.nameList.concat(res.data.data);
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch(e) {
					this.queryInfo.page--;
					this.statusNum = 0;
					// uni.hideLoading();
				}
			},
			// 获取车辆黑名单信息
			async getVehicleBlackList(init) {
				try {
					this.loading = true;
					this.nameList = [];
					this.$showLoading('加载中');
					const res = await Vehicle.getVehicleBlackList(this.queryInfo);
					console.log(res,'res')
					if (res.success) {
						uni.hideLoading();
						this.loading = false;
						this.nameList = res.data.data;
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
						init && (this.total = res.data.total);
					}
				} catch(e) {
					uni.hideLoading();
					this.loading = false;
				}
			},
			// 加载更多车辆黑名单
			async loadmoreVehicleBlackList() {
				try {
					// this.$showLoading('加载中');
					const res = await Vehicle.getVehicleBlackList(this.queryInfo);
					// uni.hideLoading();
					if (res.data.data.length) {
						this.nameList = this.nameList.concat(res.data.data);
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch(e) {
					this.statusNum = 0;
					this.queryInfo.page--;
					// uni.hideLoading();
				}
			},
			editTitle() {
				uni.setNavigationBarTitle({
					title: this.title
				})
			},
			async goLoadMore() {
				if (!this.isLoading) {
					this.isLoading = true;
					if (this.isLoadMore && this.statusNum !== 0) {
						await this.loadmore();
					}
					this.isLoading = false;
				}
			}
		},
		async onReachBottom() {
			// 上拉加载
			await this.goLoadMore();
		},
		computed: {
			note() {
				if (this.title === '人员白名单') {
					return 'list_company'
				} else if (this.title === '人员黑名单') {
					return 'list_idcard'
				} else {
					return 'list_plate'
				}
			},
			time() {
				if (this.title === '人员白名单') {
					return 'list_phone'
				} else if (this.title === '人员黑名单') {
					return ''
				} else {
					return 'list_department'
				}
			}
		},
		onLoad(res) {
			this.title = res.title;
			// #ifndef APP-PLUS || H5
			this.editTitle();
			// #endif
			if (~res.title.indexOf('人员')) {
				if (~res.title.indexOf('白')) {
					this.getPersonWhiteList(true);
				} else {
					this.getPersonBlackList(true);
				}
			} else {
				if (~res.title.indexOf('白')) {
					this.getVehicleWhiteList(true);
				} else {
					this.getVehicleBlackList(true);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-chat__content-title {
		font-size: 14px;
		
		color: $uni-color-primary;
	}
	::v-deep .uni-list-chat__content-note {
		color: $uni-text-color;
	}
	::v-deep .uni-list-chat__content-extra-text {
		color: $uni-text-color;
	}
	::v-deep .uni-list-chat {
		border-bottom: 1px solid #EEEEEE;
	}
	::v-deep .uni-easyinput__content {
		min-height: 32px;
	}
	.name-list {
		padding: 20px 50rpx 10px 50rpx;
		background-color: #FFFFFF;
		::v-deep .management-card {
			margin-bottom: 20px;
		}
		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			margin-bottom: 10px;
			.img {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
			.ipt {
				flex: 1;
				height: 32px;
				
				font-size: 14px;
				
				color: $uni-text-color;
			}
		}
	}
</style>
